<template>
  <div>
    <div class="box">
      <span class="title">{{list.title}}</span>
      <span class="Email"> Email: <span>{{list.Email}}</span></span>
        <span class="Github">Github: <span>{{list.Github}}</span></span>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      list: {
        title: '这个人很懒，什么也没有留下~',
        Email: '2470423051@qq.com',
        Github: 'https://gitee.com/wu_ke_liang'
      }
    }
  }
}
</script>
<style lang="less">
.box {
  display: flex;
  flex-direction: column;
  padding: 20px;
  width: 70%;
  background-color: rgba(255, 255, 255, 0.8);
  margin: 0 auto;
  margin-top: 20px;
  border-radius: 10px;
  box-shadow: 0 0 0 5px rgba(233, 233, 233, 0.8);
  margin-bottom: 50px;
  @media screen and (max-width: 600px) {
    width: 70%;
  }
  .title {
    margin-bottom: 20px;
    font-weight: 500;
    font-size: 14px;
    color: rgb(133, 133, 133);
  }
  .Email {
    display: flex;
    span {
      margin-left: 10px;
      color: rgb(133, 133, 133);
    }
  }
  .Github {
    display: flex;
    span {
      margin-left: 10px;
      color: rgb(133, 133, 133);
    }
  }
}
</style>